import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
import { IonicPage, NavController } from 'ionic-angular';
import { HttpService } from 'http-service';
import { API } from "../../../../shared/models/api-path-extension";
import { UtilsService } from "../../../../shared/services/utils.services";
import { SecureStorageService } from '../../../../shared/services/secure-storage.services';
import * as _ from 'lodash';
import { CardService } from '../../services/card.service';

@IonicPage({
  name: "CardSettingsPage",
  segment: "CardSettingsPage",
  priority: 'off',
  defaultHistory: [""]
})

@Component({
  selector: 'card-settings',
  templateUrl: 'card-settings.page.html'
})

export class CardSettingsPage {
  canReorder: boolean = false;
  reordered: boolean = false;
  cardList = [];
  userCardList: any = [];
  roleCardList: any = [];
  userInfo: any;
  api: API;
  iconByCard: any = {
    抄表: { icon: 'read-meter.png' },
    催费: { icon: 'charge.png' },
    复电: { icon: 'resumption.png' },
    抢修: { icon: 'rush-repair.png' },
    巡视: { icon: 'patrol.png' },
    检修: { icon: 'inspection.png' },
    领导看板: { icon: '' }
  };
  constructor(
    public httpService: HttpService,
    private utilsService: UtilsService,
    private storage: SecureStorageService,
    private cardService: CardService,
    private ref: ChangeDetectorRef
  ) {
    this.api = new API();
    this.userInfo = storage.get('userInfo').subscribe((res) => {
      if (res) {
        this.userInfo = res['data'];
        this.loadCard();
      } else {
        this.httpService.get(this.api.path({ path: "userInfo" }).baseURL, null).subscribe((response) => {
          this.storage.set('userInfo', response);
          this.userInfo = response["data"];
          this.loadCard();
        });
      }
    });
  }

  async loadCard() {
    this.utilsService.showLoading();
    await this.httpService.get(this.api.path({ path: "cardListByUser" }).baseURL, null).subscribe((response) => {
      this.userCardList = response['data'];
      this.utilsService.hiddenLoading();
      this.ref.detectChanges();
    }, (err) => this.utilsService.showLoading());
  }

  saveUserCard(card) {
    card.isAvailable = !card.isAvailable ? 1 : 0;
    this.cardService.changeStatus(card);
    this.utilsService.showLoading();
    this.cardService.saveUserCards(this.userInfo.userId, this.userCardList).then((data) => {
      this.utilsService.hiddenLoading();
      if (!card.cardUserId) {
        this.loadCard();
      }
    }, (err) => this.utilsService.hiddenLoading());
  }

  reorderItems(indexes) {
    this.reordered = true;
    let element = this.userCardList[indexes.from];
    this.userCardList.splice(indexes.from, 1);
    this.userCardList.splice(indexes.to, 0, element);
    this.cardService.reorderCard(this.userCardList);
  }

  reorder() {
    if (this.canReorder) {
      if (this.reordered) {
        this.utilsService.showLoading();
        this.cardService.saveUserCards(this.userInfo.userId, this.userCardList).then((data) => {
          this.utilsService.hiddenLoading();
          if (!this.userCardList[0].cardUserId) {
            this.loadCard();
          }
        }, (err) => this.utilsService.hiddenLoading());
      }
      this.canReorder = false;
      this.reordered = false;
    } else {
      this.canReorder = true;
    }
    this.ref.detectChanges();
    setTimeout(() => {
      this.ref.detectChanges();
    }, 500);
  }
}
